/**
 *  点击外部触发的函数
 * */
import { ref, onMounted, onUnmounted, Ref } from 'vue'
// elementRef声明一个响应式对象， Ref代表的是一个类型
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false) // 为true,就代表点击外部
  const handler = (e: MouseEvent) => {
    // e.target.className.indexOf('is-disabled') > -1 && e.target.className.indexOf('dropdown-item') > -1
    if (elementRef.value) {
      // 点击内部元素分为两种情况，第一种禁用按钮，要设置为false; 第二种非禁用按钮，设置为true
      if (elementRef.value.contains(e.target as HTMLElement)) {
        // isClickOutside.value = false
        /** TODO 目前这里的判断标签是写死的，从维护角度思考，这里还需要进一步优化 */
        // 这里加一个UL判断是防止用户直接使用DropdownItem标签；使用LI判断是用户可能会加入一些其他的标签
         e.target.parentNode.nodeName === 'LI' ? (e.target.className.indexOf('is-disabled') > -1 ? isClickOutside.value = false : isClickOutside.value = true) : (e.target.parentNode.nodeName === 'UL' ?  isClickOutside.value = true : isClickOutside.value = false)
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutside
}

export default useClickOutside
